// 注意：除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购物车设置数字徽标。

// 此时可以使用 Vue 提供的 mixins 特性，提高代码的可维护性和复用性。

// 在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 tabbar-badge.js 文件，用来把设置 tabBar 徽标的代码封装为一个 mixin 文件：

// 按需导入 mapGetters 这个辅助方法
import {
  mapGetters
} from 'vuex'

// 导出一个 mixin 对象
export default {
  // 计算属性
  computed: {
    // 将 m_cart 模块中的 total 映射为当前页面的计算属性
    ...mapGetters('m_cart', ['total'])
  },

  // 这有个小bug，修改数量后，下面tabbar的购物车数量没有及时改变，需要在mixins里面加个watch监听修改购物车数量total
  watch: {
    total: {
      handler(newTotal) {
        // 直接调用 methods 中的 setBadge 方法，重新为 tabBar 的数字徽章赋值
        this.setBadge();
        //在混入里面加个watch，当value为0时，调用uni.removeTabBarBadge({index: 2})
        if (newTotal === 0) uni.removeTabBarBadge({
          index: 2
        });
      },
    }
  },

  // 方法
  methods: {
    setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
        index: 2, // tabBar的索引
        text: this.total + '', // 注意：text 的值必须是字符串，不能是数字，所以这里利用+号拼接字符串''得到字符串
      })
    },

  },

  // 小程序生命周期函数
  onShow() {
    // 在页面刚展示的时候，设置数字徽标
    this.setBadge();
  },


}
